<template>
  <div>
    <el-dialog title="修改用户" :visible.sync="showEditCustomerDialog" center width="700px">
      <el-form :model="customerData" :rules="rules" ref="customerData">

        <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
          <el-input v-model="customerData.nickname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <!-- label为选定时候的值 -->
          <el-radio v-model="customerData.sex" :label="1">男</el-radio>
          <el-radio v-model="customerData.sex" :label="2">女</el-radio>
        </el-form-item>


<!--        <el-form-item label="省份" :label-width="formLabelWidth">-->
<!--          <el-input v-model="customerData.province" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="城市" :label-width="formLabelWidth">-->
<!--          <el-input v-model="customerData.city" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->



        <el-form-item label="状态" :label-width="formLabelWidth">
          <!-- label为选定时候的值 -->
          <el-radio v-model="customerData.status" :label="0">停用</el-radio>
          <el-radio v-model="customerData.status" :label="1">启用</el-radio>
        </el-form-item>



        <el-form-item :label="'头像'" :label-width="formLabelWidth">
          <div class="upload_head_img">
            <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_picture" class="avatar-uploader" action="">
              <img v-if="customerData.headimgurl" :src="customerData.headimgurl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit">取 消</el-button>
        <el-button type="primary" @click="submitCustomer('customerData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {edit} from '@/api/thk/customer'
  import { client } from '@/utils/alioss'


  export default {
    name: 'editCustomer',
    /**
     this.questionData.headimgurl = row.headimgurl
     this.questionData.nickname = row.nickname
     this.questionData.sex = row.sex
     this.questionData.country = row.country
     this.questionData.city = row.city
     this.questionData.status = row.status
*/
    data() {
      return {
        showEditCustomerDialog: false,
        formLabelWidth: '130px',

        value: [],

        customerData: {
          customer_id: '',
       //   unionid: '',
          sort_order: '',
          date_added: '',
         // openid: '',
          headimgurl: '',
          nickname: '',
          sex: '',
          country: '',
          province: '',
          city: '',
          status: '',
        },

        provinceAndCityList: [],

        rules: {
          // 问题为必填字段
          nickname:[
            { required: true, message: '昵称为必填项', trigger: 'blur' },
          ],
        }
      }
    },


    methods: {
      // 判断是否点击了提交
      submitCustomer(customerData){
        this.$refs[customerData].validate((valid) => {
          if (valid) {
            edit(store.getters.token,this.customerData).then(result => {
              this.showEditCustomerDialog = !this.showEditCustomerDialog
              this.$message.success('修改成功')
              this.$parent.getCustomerList()
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      // 显示dialog,并将数据回显
      showEditDialog(row, provinceAndCityList){
        this.customerData.customer_id = row.customer_id
        this.customerData.nickname = row.nickname
        this.customerData.country = row.country
        this.customerData.status = row.status

        if(row.customer_wechat.length>0){
          this.customerData.headimgurl = row.customer_wechat[0].headimgurl
          this.customerData.sex = row.customer_wechat[0].sex
          this.customerData.city = row.customer_wechat[0].city
          this.customerData.province = row.customer_wechat[0].province
        }
        // 不需要修改,则不需要回显
        this.customerData.date_added = row.date_added
        // this.customerData.unionid = row.unionid
        // this.customerData.openid = row.openid

        this.provinceAndCityList = provinceAndCityList
        this.changeCityData()
        this.showEditCustomerDialog = !this.showEditCustomerDialog
      },

      cancelSubmit(){
        this.showEditCustomerDialog = !this.showEditCustomerDialog

      },


      // 转换省份数据
      changeCityData(){
        console.log("changeCityList",this.provinceAndCityList)
        let data = {data: this.provinceAndCityList}
        let str = JSON.stringify(data).replace(/province_id/g,'value')
        str = str.replace(/province/g,'label')

        str = str.replace(/city_id/g,'value')
        str = str.replace(/city/g,'label')

        str = str.replace(/country_id/g,'value')
        str = str.replace(/country/g,'label')

        data = JSON.parse(str)
        this.provinceAndCityList = data.data
      },

      handleChange(value){
        if(value){
          this.customerData.province = value[0]
          this.customerData.city = value[1]
          this.customerData.country = value[2]
        }
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_picture(file) {
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.customerData, 'headimgurl', res.url)

          // that.storeList.wechat_qrcode = res.url

          console.log(res.url);
          that.$message.success('头像地址上传成功！')
        }).catch((err) => {
          that.$message.error('头像地址上传失败，原因：' + err)
        })
      },

    }
  }
</script>


<style>
  /* 图片上传的样式 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }

  /* 头像地址(head_img)图片上传组件的尺寸 */
  .upload_head_img .avatar-uploader .el-upload{
  }
  .upload_head_img .avatar-uploader-icon{
    font-size: 28px;
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
  .upload_head_img .avatar{
    width: 80px;
    height: 80px;
  }
</style>
